<template>
	<view>
		<view class="h1">
			<text>选择日期</text>
		</view>
		<view class="dataList">
			<view :class="dt==1?'one on':'one'" @click="dt=1">
				<view class="week">今天</view>
				<view class="data">1/17</view>
				<view class="tag1">可预约</view>
			</view>
			<view :class="dt==2?'one on':'one'" @click="dt=2">
				<view class="week">周六</view>
				<view class="data">1/18</view>
				<view class="tag0">已约满</view>
			</view>
			<view :class="dt==3?'one on':'one'" @click="dt=3">
				<view class="week">周日</view>
				<view class="data">1/19</view>
				<view class="tag1">可预约</view>
			</view>
			<view :class="dt==4?'one on':'one'" @click="dt=4">
				<view class="week">周一</view>
				<view class="data">1/20</view>
				<view class="tag1">可预约</view>
			</view>
			<view :class="dt==5?'one on':'one'" @click="dt=5">
				<view class="week">周二</view>
				<view class="data">1/21</view>
				<view class="tag1">可预约</view>
			</view>
		</view>
		<view class="h1">
			<text>选择场次</text>
		</view>
		<view class="ccList">
			<view :class="cc==1?'one on':'one'" @click="cc=1">
				<view class="time">09:00 - 11:59</view>
				<view class="tag">免费</view>
			</view>
			<view :class="cc==2?'one on':'one'" @click="cc=2">
				<view class="time">12:00 - 16:30</view>
				<view class="tag">免费</view>
			</view>
		</view>
		<view class="button">
			<button type="warn" :disabled="dt==0 || cc==0">个 人 预 约</button>
		</view>
		<view class="h1">
			预约须知
		</view>
		<view class="readme">
			<view class="text"><text>随约随用：16:00点前可订今日，预订后颗粒剂使用</text></view>
			<view class="text"><text>入馆时间：90:00-16:00（具体以最新开放公告为准）</text></view>
			<view class="text"><text>其他：60岁以上老年人无需预约，刷身份证入馆；14周岁以下的未成年人无需预约，与已预约的成年人入馆参观。</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dt:0,
				cc:0,
			}
		},
		methods: {
			
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:"预约服务"
			})
			// 设置导航栏标题颜色
			uni.setNavigationBarColor({
			  frontColor: '#ffffff',
			  backgroundColor: '#721b28'
			});
		}
	}
</script>

<style lang="scss" scoped>
	
	.h1{
		font-size:40upx;
		font-weight: bold;
		padding: 50upx;
		clear: both;
	}

	.dataList{
		margin: 0 40upx;
		.one{
			border: solid 1px #c1b28f;
			padding:20upx 10upx;
			margin: 1px;
			width: 100upx;
			font-size:20upx;
			float:left;
			background-color: #f9f9f9;
			border-radius: 10upx;
			.week{
				text-align: center;
			}
			.data{
				text-align: center;
			}
			.tag0{
				margin-top:10upx;
				color:darkred;
				text-align: center;
			}
			.tag1{
				margin-top:10upx;
				color:green;
				text-align: center;
			}
		}
		.on{
			border: solid 1px red;
			background: #dbcba4;
		}
		
	}

	.ccList{
		margin: 0 40upx;
		.one{
			border: solid 1px #c1b28f;
			padding:20upx;
			margin: 5px;
			width: 25%;
			font-size:20upx;
			float:left;
			background-color: #f9f9f9;
			border-radius: 10upx;
			.time{
				text-align: center;
			}
			.tag{
				margin-top:10upx;
				color:#cc3333;
				text-align: center;
			}
		}
		.on{
			border: solid 1px red;
			background: #dbcba4;
		}
	}
	.button{
		clear: both;
		margin: 0 50upx;
		padding:50upx 0 20upx 0;
	}
	.readme{
		border: solid 1px #c1b28f;
		margin: 0 50upx;
		padding: 20upx;
		.text{
			padding: 10upx 0;
			font-size: 26upx;
			letter-spacing: 2px;
			line-height: 50upx;
		}
	}
</style>
